<template>
    <div class="emoji-picker">
      <div class="emoji-container">
        <div 
          v-for="emoji in emojis" 
          :key="emoji"
          class="emoji-item"
          @click.stop="selectEmoji(emoji)"
        >
          {{ emoji }}
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  // 这里只是一个简单的表情列表，你可以根据需要扩展
  const emojis = [
    '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣',
    '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰',
    '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜',
    '🤪', '🤨', '🧐', '🤓', '😎', '🤩', '🥳', '😏',
  ]
  
  const emit = defineEmits(['select-emoji'])
  
  const selectEmoji = (emoji) => {
    emit('select-emoji', emoji)
  }
  </script>
  
  <style scoped>
  .emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 10px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    z-index: 1000;
  }
  
  .emoji-container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
    max-height: 200px;
    overflow-y: auto;
  }
  
  .emoji-item {
    font-size: 1.5em;
    padding: 5px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s;
    border-radius: 4px;
  }
  
  .emoji-item:hover {
    background-color: #f0f0f0;
  }
  </style>